<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title></title>
	<BASE href="/SSMSD/">
	<!-- bootstrap的css核心，定义了很多的class -->
	<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
	<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
	<!-- 生成弹框、提示框、下拉菜单的 -->
	<script type="text/javascript" src="../assets/js/popper.min.js"></script>
	<!-- bootstrap的js，用于响应事件 -->
	<script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/hotel.css"/>
	<!--引入bootstrap-table样式  -->
	<link href="Rgx/css/bootstrap-table.css" rel="stylesheet">
	<!-- bootstrap-table.min.js -->
	<script src="Rgx/js/bootstrap-table.js"></script>
	<!-- 引入中文语言包 -->
	<script src="Rgx/js/bootstrap-table-zh-CN.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- 弹窗 -->
</head>
<body>
  
<div>
    <div>
    <div id="a2">
		<div id="a2-1">
			<div class="col-*-12">
            <table id="mytab" class="table table-hover"></table>
        </div>
	
	</div>
	<div id="a2-2">
	
			<div id="a2-2-1">
				<!--触发器-->
<!-- <button class="btn-primary" data-toggle="modal" data-target="#mymodal" id="1">我是按钮,来点我</button>
 -->				<!--维修  -->
		<div id="img0" ></div>
    	<div id="img1" ></div>
    	<div id="img2"></div>
				<!-- <button id="lookroom">查看房间信息</button><br><br> -->
				<!-- <button id="roomthing">办理入住</button><br><br>	 -->
				
			</div>
			<div id="a2-2-3">
		<iframe class="map" src="Map.html" frameborder="0" scrolling="no" style="width:350px;height:190px;"></iframe>
	 	<div id="comment1"></div>
			</div>

				</div>
	</div>
    
        
    </div>
    <button id="finbutton" class="btn btn-success">进入房间选择
    <span class="glyphicon glyphicon-print" ></span>
    </button>
     <button id="lookhotel" class="btn btn-success">查看酒店图片
    <span class="glyphicon glyphicon-print" ></span>
    </button>
      <button id="lookevaluate" class="btn btn-success">查看酒店评价
    <span class="glyphicon glyphicon-print" ></span>
    </button>
    
</div>

	<script type="text/javascript">
    $(function() {
        //根据窗口调整表格高度
        $(window).resize(function() {
            $('#mytab').bootstrapTable('resetView', {
                height: tableHeight()
            })
        })
/* findHotel */
        $('#mytab').bootstrapTable({
            url: "/SSMSD/hotel/findHotel",//数据源
            dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
            height: tableHeight(),//高度调整
            search: true,//是否搜索
            pagination: true,//是否分页
            pageSize: 5,//单页记录数
            pageList: [5, 10, 20, 50],//分页步进值
            sidePagination: "client",//前端分页
            contentType: "application/x-www-form-urlencoded",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
            dataType: "json",//期待返回数据类型
            method: "post",//请求方式
            searchAlign: "left",//查询框对齐方式
            queryParamsType: "limit",//查询参数组织方式
            queryParams: function getParams(params) {
                //params obj
                params.other = "otherInfo";
                return params;
            },
            singleSelect : true,
            searchOnEnterKey: true,//回车搜索
            showRefresh: true,//刷新按钮
            showColumns: true,//列选择按钮
            buttonsAlign: "left",//按钮对齐方式
            toolbar: "#toolbar",//指定工具栏
            toolbarAlign: "right",//工具栏对齐方式
            columns: [
                {
                    title: "全选",
                    field: "select",
                    checkbox: true,
                    width: 20,//宽度
                    align: "center",//水平
                    valign: "middle"//垂直
                },
                {
                    title: "酒店id",//标题
                    field: "hotelid",//键名
                    sortable: true,//是否可排序
                    order: "desc"//默认排序方式
                },
                {
                    field: "hotelname",
                    title: "酒店名称",
                    sortable: true,
                    titleTooltip: "this is name"
                },
                {
                    field: "hoteladdr",
                    title: "酒店地址",
                    sortable: true,
                },
                {
                    field: "performance",
                    title: "酒店业绩",
                    
                },
                {
                    field: "describe",
                    title: "酒店描述",
                    
                },
                
            ],
            onClickRow: function(row, $element) {
            	
                //$element是当前tr的jquery对象
                $element.css("background-color", "green");
            },//单击row事件
            locale: "zh-CN", //中文支持
            detailView: false, //是否显示详情折叠
            detailFormatter: function(index, row, element) {
                var html = '';
                $.each(row, function(key, val){
                    html += "<p>" + key + ":" + val +  "</p>"
                });
                return html;
            }
        });
      
        
      /*   ,function (row1){ return row1;} */
      //进入房间选择
        $("#finbutton").click(function(){
        					//获取复选框
                    		var as= $("#mytab").bootstrapTable('getSelections',function (row){ 
                    			return row;
                    		});
                    
                    		alert(as[0].hotelid);
                    		var b=as[0].hotelid;

                    		 if(as.length<=0){
                    			 alert("请选中一行")
                    		}else{
                    			window.open("roomwithcustomer.html?hotelid="+b);
                    			
                    		} 
                    		
                    	});
        //查看照片
        $("#lookhotel").click(function(){
        					//获取复选框
                    		var as= $("#mytab").bootstrapTable('getSelections',function (row){ 
                    			return row;
                    		});
                    
                    		alert(as[0].hotelid);
                    		var b=as[0].hotelid;

                    		 if(as.length<=0){
                    			 alert("请选中一行")
                    		}else{
                    			 var url="/SSMSD/imgs/findHotelImgs";
                 	  		    $.ajax({
                 	  		        dataType: "json",
                 	  		        traditional:true,
                 	  		        data:as[0],
                 	  		        type: "post", 
                 	  		        url: url,
                 	  		        success : function (data) {
                 	  		        	var img={};
                 	  		        	for(var i=0;i<data.length;i++){
                 	  		        		img[i]='<img src="'+data[i].imgaddr+'" >';
                 	  		        		$("#"+"img"+i).html(img[i]); 
                 	  		        	}
                 	  		        	
                 	  		        },
                 	  		        error : function (data){
                 	  		            alert("失败！");
                 	  		        }
                 	  		    }); 
                    			
                    		} 
                    		
                    	});
      //查看酒店评价
         $("#lookevaluate").click(function(){
        					
                    		var as= $("#mytab").bootstrapTable('getSelections',function (row){ 
                    			return row;
                    		});
                    
                    		alert(as[0].hotelid);
                    		var b=as[0].hotelid;

                    		 if(as.length<=0){
                    			 alert("请选中一行")
                    		}else{
                    			 var url="/SSMSD/evaluate/findEvaluate";
                 	  		    $.ajax({
                 	  		        dataType: "json",
                 	  		        traditional:true,
                 	  		        data:as[0],
                 	  		        type: "post", 
                 	  		        url: url,
                 	  		        success : function (data) {
                 	  		        	var content="";
                 	  		        	for(var i=0;i<data.length;i++){
                 	  		        		content+='<tr>'
                 	  		        			+'<td>'+"第"+(i+1)+"条评论:"+'</td>'
                 	  		        			+'<td>'+data[i].info+'</td>'
                 	  		        			+'</tr>';
                 	  		        	}
                 	  		        	$("#comment1").html(content);
                 	  		        },
                 	  		        error : function (data){
                 	  		            alert("失败！");
                 	  		        }
                 	  		    }); 
                    			
                    		} 
                    		
                    	}); 
        

        $("#addRecord").click(function(){
            alert("name:" + $("#name").val() + " age:" +$("#age").val());
        });
    })

    function tableHeight() {
        return $(window).height() - 300;
    }
    /**
     * 列的格式化函数 在数据从服务端返回装载前进行处理
     * @param  {[type]} value [description]
     * @param  {[type]} row   [description]
     * @param  {[type]} index [description]
     * @return {[type]}       [description]
     */
    function infoFormatter(value, row, index)
    {
        return "id:" + row.id + " name:" + row.name + " age:" + row.age;
    }
     
     /* /SSMSD/hotel/findHotel */

     
     
</script>
</body>
</html>